<div>
    <div className="g-user">
        <div className="c-layout clearfix">
            <SliderComponent  data={this.props.data.slider}></SliderComponent>

            { !component.state.summitOk && !component.state.saveDraftOk &&
            <div className="m-content">

                <div className="m-info-title">
                    <div  className="title-location">
                        <a onClick={this.leaveTips} href="javascript:void(0);">产品列表</a> <span name='T_cee6' >&gt;批量下单</span>
                    </div>
                </div>

                <div className="m-search-box">
                    <input className="input" onKeyDown={this.enter} id="search" maxLength="30"  placeholder="请输入姓名、电话或地址"/>
                    <input type="button"  className="btn-red" onClick={this.search} value="搜索"/>
                </div>

                <div className="button-group" id="button-group">
                    <input type="file"
                           accept=".xlsx"
                           id="upLoadFile"
                           className="hide-upload"  onChange={this.uploadFile}/>
                    <input type="button" onClick={this.showTips} className="btn-red" value="导入文档"/>

                    <span>
                        <a className="downloadTemplate" href="api/v1/order/batches/template"></a>
                        <input type="button"  className="btn-red" value="下载模板"/>
                    </span>
                    <input type="button" onClick={this.removeOrders} className="btn-red" value="删除"/>

                    <label id="showFailOrders" className="m-checkbox checkbox-self unchecked" onClick={this.chooseOrderStatus}></label>
                    <span>只显示失败的</span>
                </div>

                <div  className="order-line-wrap">
                    <table >
                        <thead>
                        <tr>
                            <th  width="60">
                                <div  className="hna-checkbox">
                                    <input type="checkbox" id="hna-checkbox"
                                    checked={this.state.selectLength > 0 &&
                                    this.state.selectLength === this.state.list.length} onChange={this.selectItemFn.bind(this, 'all')}/>
                                    <label htmlFor="hna-checkbox"></label>
                                </div>
                            </th>
                            <th name='T_bc0b' >客户单号</th>
                            <th name='T_4126' >产品信息</th>
                            <th name='T_4126' >货物类型</th>
                            <th name='T_c931' >起止地</th>
                            <th name='T_7a04'  style={{'width':'135px'}}>校验状态</th>
                        </tr>
                        </thead>
                        <tbody name='T_f613' >
                        {
                        this.state.list.length ?
                        this.state.list.map(function (item, index) {
                        return (
                        <tr name='T_9669'  key={index}>
                            <td name='T_6891' >
                                {
                                <div name='T_6405'  className="hna-checkbox">
                                    <input name='T_5d03'  type="checkbox" id={'hna-checkbox_' + index} checked={ component.state.selectLength && component.state.selectItem.indexOf(item.id) !== -1 } onChange={component.selectItemFn.bind(component, item)}/>
                                    <label name='T_3401'  htmlFor={'hna-checkbox_' + index}></label>
                                </div>
                                }
                            </td>
                            <td name='T_ec08' ><a className="link" id="highVolumehref"  onClick={component.jumpToOrderDetail.bind(component,item)} href="javascript:void(0)"  >{item.externalNo || '/'}</a></td>
                            <td name='T_f68b' >{item.productName}</td>
                            <td name='T_3091' >{item.cargoTypeName || '/'}</td>

                            {
                              item.verifiedStatus === false &&
                              <td name='T_9a05' >{item.fromAddress.cityName} - {item.toAddress.cityName}</td>
                            }
                            {
                              item.verifiedStatus === true && (item.fromAddress.transportType === 1 || item.fromAddress.transportType ===6) &&
                              <td name='T_9a05' >{item.fromAddress.transportName } - {item.toAddress.transportName}</td>
                            }
                            {
                               item.verifiedStatus === true && item.fromAddress.transportType === 11  &&
                               <td name='T_9a05' >{item.fromAddress.cityName}({item.fromAddress.countryCode}) - {item.toAddress.cityName}({item.toAddress.countryCode})</td>
                            }

                            {item.verifiedStatus === false? <td className="itemFail" >失败</td>:<td >成功</td>}
                        </tr>
                        )
                        })
                        :
                        <div></div>
                        }
                        </tbody>
                    </table>
                    {
                     this.state.list.length ?
                      <div></div> :
                      <div className="text-center">
                          <div className="no-data-pic"></div>
                          <div className="grey">暂无数据</div>
                      </div>

                    }
                </div>
                {
                (this.state.list.length > 0) &&
                Browser
                &&
                <Pagination pageSize={this.state.pageSize} name='T_f067'  onChange={this.onPageChange} current={this.state.pageIndex} onShowSizeChange={this.onPageChange} total={this.state.totalResult} showQuickJumper showSizeChanger showLessItems />
                }
            </div>
            }

            {
            component.state.saveDraftOk &&
            <div className="m-content" >
                <div className="summitOKBody" id="summitOKBody">
                    <div className="right"></div>
                    <div className="summitOK">保存草稿成功！</div>
                </div>
            </div>
            }

            {
            component.state.summitOk &&
            <div className="m-content" >
                <div className="summitOKBody" id="summitOKBody">
                    <div className="right"></div>
                    <div className="summitOK">订单提交成功！请您尽快支付</div>
                    <div className="summitOKTip">已收到您的订单，我们会尽快为您服务，您可以在个人中心查看订单进度</div>
                </div>
            </div>
            }

        </div>
    </div>

    {(!component.state.summitOk) && (!component.state.saveDraftOk) &&
    <div className="orderOper" id="orderOper">
        <div>
            <span>已经导入<span className="totalResult" name='T_4d50' >{this.state.totalResult}</span>条信息</span>
            <button   className="btn-grey " onClick={this.saveDraft} >保存草稿</button>
            <button   className="btn-red" onClick={this.summitOrders}>提交订单</button>
        </div>
    </div>
    }


</div>